<template>
  <div>
    用户订单
    <el-table :data="tableData5"  style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand" v-for="(item,index) in props.row.goodsList" :key="index">
            <el-form-item label="商品名称">
              <span>{{ item.productName }}</span>
            </el-form-item>
            <el-form-item label="商品数量">
              <span>{{ item.productNum }}</span>
            </el-form-item>
            <el-form-item label="商品单价">
              <span>{{ item.salePrice }}</span>
            </el-form-item>
            <el-form-item label="商品总价">
              <span>{{ item.productNum * item.salePrice }}</span>
            </el-form-item>
          </el-form>
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="收货地址">
              <span>{{ props.row.addressInfo.streetName + "   " +  props.row.addressInfo.tel}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!--表头-->
      <el-table-column
        label="订单ID"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="订单消费"
        prop="orderTotal">
      </el-table-column>
      <el-table-column
        label="订单时间"
        prop="createDate">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    name:"userOrder",
    data() {
      return {
        tableData5:[],
      }
    },
    mounted(){
      this.$http.post("/api/users/getUserOrder").then(res=>{
          if(res.data.code == 200){
            this.tableData5 = res.data.result;
          }else{
            this.$message.error(res.data.msg);
          }
      })
    }
  }
</script>

<style>

</style>
